<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getGoodsAPI, addGoodsWarningAPI} from "@/axios/api";
import {ElMessage} from "element-plus";

interface use {
  gId: number | null
  number: number | null
  remark: string | null
}

const GoodsWarningForm = ref<use>({
  gId: null,
  number: null,
  remark: null
})
const GoodsList = ref([])

function getGoods() {
  getGoodsAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    GoodsList.value = data.data.data.stockList
  })
}

function addGoodsWarning() {
  if (GoodsWarningForm.value.gId == null) {
    ElMessage.error("商品名称不能为空")
    return
  }
  if (GoodsWarningForm.value.number == null) {
    ElMessage.error("预警数量不能为空")
    return
  }
  addGoodsWarningAPI(GoodsWarningForm.value).then(data => {
    ElMessage.success(data.data.data)
    empty()
  })
}

function empty() {
  for (const key in GoodsWarningForm.value) {
    GoodsWarningForm.value[key] = null
  }
}

onMounted(() => {
  getGoods()
})
</script>
<template>
  <el-form
      :model="GoodsWarningForm"
      label-width="auto"
      style="max-width: 600px"
  >
    <el-form-item
        label="商品名称:"
    >
      <el-select
          v-model="GoodsWarningForm.gId"
          placeholder="请选择商品"
      >
        <el-option
            v-for="item in GoodsList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        label="预警数量:"
    >
      <el-input
          v-model="GoodsWarningForm.number"
          type="number"
          placeholder="输入预警数量"
      />
    </el-form-item>

    <el-form-item
        label="备注:"
    >
      <el-input
          v-model="GoodsWarningForm.remark"
          type="textarea"
          placeholder="请输入备注信息"
          show-word-limit
          maxlength="250"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addGoodsWarning"
      >添加
      </el-button>
      <el-button
          @click="empty"
      >取消
      </el-button>
    </el-form-item>
  </el-form>
</template>